import { RadioGroupComponent } from './radio-group.component';
import { Component, OnInit, Input,  EventEmitter, ElementRef,Output} from '@angular/core';
import { ControlValueAccessor,NG_VALUE_ACCESSOR } from '@angular/forms';
import { ElementuiService } from './../elementui.service';

@Component({
  selector: 'el-radio-button',
  templateUrl: './radio-button.component.html',
  providers: [{
      provide: NG_VALUE_ACCESSOR,
      useExisting: RadioButtonComponent,
      multi: true
  }], 
})
export class RadioButtonComponent implements OnInit,  ControlValueAccessor {
  private sanitizer:any;
  private el:any;
  private form:any;
  private controlChange:any = function () { };
  private controlTouch:any = function () { };
  private rootGroup:any;

  @Input() disabled: boolean = false;
  @Input() border: boolean = false;
  @Input() label: string | number = '';
  @Input() size: string  = '';
  @Input() nativeName: string = '';
  @Input() model: any;
  @Output() modelChange: EventEmitter<any>= new EventEmitter();
  @Input() isFocus: boolean = false;
  @Input() parentIsGroup: boolean = false;
  activeStyles: any;
  
  constructor(el: ElementRef,rootGroup: RadioGroupComponent, private ElementuiService:ElementuiService) { 
    this.el = el;
    this.rootGroup = rootGroup;
  }

  writeValue(value: any): void {
    
  }
  registerOnChange(fn: any): void {
    this.controlChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.controlTouch = fn;
  }

  changeHandle() {
    if (this.parentIsGroup) {
      return this.rootGroup.changeHandle(this.label);
  }
  this.modelChange.emit(this.label);
  }

  disabledClass() {
    return this.disabled ? ' is-disabled' : '';
  }

  isFocusClass() {
    return this.isFocus ? ' is-focus' : '';
  }

  borderClass() {
    return this.border ? ' is-bordered' :'';
  }

  isCheckClass() {
    return this.model === this.label ? ' is-checked' : '';
  }

  sizeClass() {
    return this.size && this.border ? ' el-radio-button--'+this.size : '';
  }

  ngOnInit(): void {
    var _this = this;
        var /** @type {?} */ nativeElement = this.el.nativeElement;
        var /** @type {?} */ update = function () {
            _this.disabled = _this.rootGroup.disabled;
            _this.model = _this.rootGroup.model;
            _this.size = _this.rootGroup.buttonSize;
            _this.activeStyles = {
                backgroundColor: _this.rootGroup.fillColor || '',
                borderColor: _this.rootGroup.fillColor || '',
                boxShadow: _this.rootGroup.fillColor ? "-1px 0 0 0 " + _this.rootGroup.fillColor : '',
                color: _this.rootGroup.textColor || '',
            };
        };
        this.parentIsGroup = this.ElementuiService.isParentTag(nativeElement, 'el-radio-group');
        this.ElementuiService.removeNgTag(nativeElement);
        if (this.parentIsGroup && this.rootGroup) {
            update();
            this.rootGroup.subscriber.push(update);
        }
  }

}
